<!--
 * @Author: QUAN
 * @Date: 2021-08-27 11:07:36
 * @LastEditTime: 2021-11-08 15:19:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mutong-jimu-h5-activity\src\views\BlindBox\GetIntegral.vue
-->

<template>
  <div class="get-integral">
    <!-- 这里是我要开盲盒 -->
    <div class="header">
      <div class="i-will-open-box">
        <span>我要开盲盒</span>
      </div>
      <span class="activity-rule" @click="activityRule">活动规则</span>
    </div>

    <!-- 这里是做任务积分获取区域 -->
    <div class="title">
      <p>01</p>
      <p class="title-content">完成任务，获取开盲盒机会</p>
    </div>
    <div class="task">
      <div class="task-item">
        <img src="@/assets/images/activity/task-sign.png" alt="" />
        <div class="info">
          <p class="task-item-title">
            <span>每日签到</span>
            <img src="../../assets/images/activity/jimu.png" alt="" />
            <span>+10</span>
          </p>
          <p class="task-item-sub-title">每日进入超级盲盒页面</p>
        </div>
        <van-button
          class="task-item-button"
          size="small"
          v-if="taskData.signin > 0 || !taskData.signin"
          @click="getGrade('signin', $event)"
        >
          签到
        </van-button>
        <van-button class="task-item-button finished" size="small" v-else>已签到</van-button>
      </div>
      <div class="task-item">
        <img src="@/assets/images/activity/task-invite.png" alt="" />
        <div class="info">
          <p class="task-item-title">
            <span>邀请好友加入积幕</span>
            <img src="../../assets/images/activity/jimu.png" alt="" />
            <span>+10</span>
          </p>
          <p class="task-item-sub-title">邀请好友参与抽盲盒活动</p>
        </div>
        <van-button
          class="task-item-button get"
          size="small"
          v-if="taskData.invite > 0"
          @click="getGrade('invite', $event)"
        >
          领取奖励
        </van-button>
        <van-button class="task-item-button" size="small" v-else @click="toInvite">
          去邀请
        </van-button>
      </div>
      <div class="task-item">
        <img src="@/assets/images/activity/task-publish.png" alt="" />
        <div class="info">
          <p class="task-item-title">
            <span>发布内容</span>
            <img src="../../assets/images/activity/jimu.png" alt="" />
            <span>+15</span>
          </p>
          <p class="task-item-sub-title">发布视频、文章、图片作品</p>
        </div>
        <!-- 这里只能用v-show,v-if和AppJump连用会出问题 -->
        <van-button
          class="task-item-button get"
          size="small"
          v-show="taskData.creation > 0"
          @click="getGrade('creation', $event)"
        >
          领取奖励
        </van-button>
        <van-button
          class="task-item-button"
          size="small"
          id="publish"
          v-app-jump="{ to: goPublish,
          params: {
            ymscheme: this.query.uuid
              ? `mtjimu://webview?url=https://${
                  env === 'development' ? 'dev-' : ''
                }jimu-h5.movtile.com/activity/blindbox.html?uuid=${this.query.uuid}`
              : `mtjimu://webview?url=https://${
                  env === 'development' ? 'dev-' : ''
                }jimu-h5.movtile.com/activity/blindbox.html`,
            }, 
          }"
          youmeng="youmeng"
          v-show="(taskData.creation === 0 && !$UA.isJM) || (!taskData.creation && !$UA.isJM)"
        >
          去发布
        </van-button>
        <van-button
          class="task-item-button"
          size="small"
          @click="_openLink(goPublish)"
          v-show="(taskData.creation === 0 && $UA.isJM) || (!taskData.creation && $UA.isJM)"
        >
          去发布
        </van-button>
        <van-button class="task-item-button finished" size="small" v-show="taskData.creation < 0">
          已领取
        </van-button>
      </div>
      <div class="task-item">
        <img src="@/assets/images/activity/task-share.png" alt="" />
        <div class="info">
          <p class="task-item-title">
            <span>分享作品</span>
            <img src="../../assets/images/activity/jimu.png" alt="" />
            <span>+5</span>
          </p>
          <p class="task-item-sub-title">将作品分享到微信或者微博等</p>
        </div>
        <van-button
          class="task-item-button"
          size="small"
          id="share"
          v-app-jump="{ to: goShare,
          params: {
            ymscheme: this.query.uuid
              ? `mtjimu://webview?url=https://${
                  env === 'development' ? 'dev-' : ''
                }jimu-h5.movtile.com/activity/blindbox.html?uuid=${this.query.uuid}`
              : `mtjimu://webview?url=https://${
                  env === 'development' ? 'dev-' : ''
                }jimu-h5.movtile.com/activity/blindbox.html`,
            }, 
          }"
          youmeng="youmeng"
          v-show="(taskData.share === 0 && !$UA.isJM) || (!taskData.share && !$UA.isJM)"
        >
          去分享
        </van-button>
        <van-button
          class="task-item-button"
          size="small"
          @click="_openLink(goShare)"
          v-show="(taskData.share === 0 && $UA.isJM) || (!taskData.share && $UA.isJM)"
        >
          去分享
        </van-button>
        <van-button
          class="task-item-button get"
          size="small"
          v-show="taskData.share > 0"
          @click="getGrade('share', $event)"
        >
          领取奖励
        </van-button>
        <van-button class="task-item-button finished" size="small" v-show="taskData.share < 0">
          已领取
        </van-button>
      </div>
    </div>

    <!-- 这里是关注创作者积分获取区域 -->
    <div class="title second">
      <p>02</p>
      <p class="title-content">
        关注创作者得开盲盒机会
        <span v-if="taskData.follow > -1 || !taskData.follow">每日可领三次关注奖励</span>
        <span v-else class="task-success">今日关注奖励已领取</span>
      </p>
    </div>
    <div class="creator">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item, index) in creatorList" :key="index">
          <div
            class="creator-item"
            :class="{ person: item.identified === 1, organization: item.identified === 2 }"
          >
            <img :src="item.avatar" alt="" @click="toCreator(item)"/>
            <p class="nickname">{{ item.nickname }}</p>
            <p class="profession">{{ item.profession ? item.profession : '' }}</p>
            <p class="add-jimu">+2</p>
            <van-button
              class="task-item-button"
              size="small"
              v-if="!item.isFous"
              @click="attention(item, $event)"
            >
              关注
            </van-button>
            <van-button class="task-item-button finished" size="small" v-else>已关注</van-button>
          </div>
        </swiper-slide>
      </swiper>
    </div>

    <van-popup v-model="show" closeable round position="bottom" @close="closePop" :style="{ height: '70%' }">
      <h2>活动规则</h2>
      <h3>
        欢迎来到积幕盲盒世界，你可以通过参与任务获得抽取盲盒的机会，解锁iPad mini、小米蓝牙耳机、幕童有课VIP等丰厚礼品！
      </h3>
      <p class="title">一、活动规则：</p>
      <p>1、每日签到、发布内容、分享作品每日可分别获得1次相对应的积木奖励；</p>
      <p>2、关注创作者每日可获得3次相对应的积木奖励；</p>
      <p>3、每日邀请好友次数没有上限，用户可通过分享链接的方式邀请好友参与盲盒活动，每成功邀请一位好友即可获得1次相对应的积木奖励；</p>
      <p>4、每累计10个积木可开一次盲盒，积木的有效时间为一年，自获取之日开始计算，到期后将自动清除；</p>
      <p>5、视频、文章、图片发布后均以后台审核通过为准，若存在多次恶意发布无意义内容，积幕有权未经通知取消其参与资格；</p>
      <p>6、抽中盲盒后，请在有效时间（15个工作日）内兑换领取，超时将无法领取。领取信息提交后，我们将会在15个工作日内把奖品发放给您，请您耐心等待并确保您填写的信息准确无误；</p>
      <p>7、领奖须知：中奖后需将中奖海报分享至微博或朋友圈，微博请@积幕视频，并将分享截图私信发送至“积幕客服”，完成后我们将尽快安排奖品的发放；</p>
      <p>8、积幕会根据活动情况对日常任务进行相关调整，具体以最终呈现为准。</p>
      <p class="title">二、法律声明：</p>
      <p>1、用户不得采取任何不正当或作弊的违规手段参与本活动，一经发现，平台有权限制或取消用户参与活动的资格，有权取消奖励、追讨用户已领取的奖励；</p>
      <p>2、若由于用户自身原因（包括但不限于参与方式不符合活动规则、操作不当造成产品功能故障、未及时领取奖励等）导致无法实际享有奖励的，视为用户自愿放弃奖励，平台将不会也无义务给予任何形式的补偿；</p>
      <p>3、平台现行有效的《积幕用户服务协议》、《积幕隐私政策》（统称为「前述协议」）同样适用于本活动，本活动规则及相关条款与前述协议相冲突的，以本活动规则及相关条款为准。本活动规则及相关条款未约定的内容，仍以前述协议为准；</p>
      <p>4、在法律法规允许的范围内，平台有权对本活动规则进行变动或调整，相关变动或调整将公布在活动规则页面上，并于公布时即时生效，用户继续参与活动则视为同意并接受变动或者调整后的活动规则。如果用户拒绝活动规则的变更或者调整，请放弃参与变更后的活动。</p>
      <h3>*本活动最终解释权归积幕所有</h3>
    </van-popup>
  </div>
</template>
<script>
  import { Button, Toast, Popup } from 'vant';
  import { mapGetters } from 'vuex';
  import mixins from 'mixins';
  Toast.setDefaultOptions({ duration: 3000 });

  export default {
    props:['isRefresh'],
    components: {
      // vant组件
      'van-button': Button,
      'van-popup': Popup,
    },
    mixins: [mixins],
    data() {
      return {
        // 任务积分
        taskData: {},
        // 创作者列表
        creatorList: [],
        // 调整
        goPublish: 'mtjimu://publish',
        goShare: 'mtjimu://todays',
        // swiper配置
        swiperOptions: {
          autoplay: true,
          slidesPerView: 'auto', //一屏展示多少个
          spaceBetween: 9, //间隔
        },
        // 增加的分数
        fs: '',
        // 是不是可以继续关注了
        canFollow: true,

        // 底部弹出
        show: false,

        // 环境
        env: process.env.NODE_ENV,
      };
    },
    computed: {
      ...mapGetters(['$userInfo']),
    },
    watch: {
      //
      '$userInfo.nickname': {
        handler(val) {
          // 轮询用户任务积分
          this.getTaskGrade();
          // 获得创作者
          this.getCreator();
        },
      },
      // 父组件要子组件刷新
      isRefresh:{
        handler(val) {
          // 轮询用户任务积分
          this.getTaskGrade();
        },
      }
    },
    created() {
      this.getCreator();
    },
    mounted() {
      this.$EventBus.$on('jm:hybridActive', () => {
        this.$emit('refreshGrade');
        this.getTaskGrade()
        // 获得创作者
        this.getCreator();
      });
    },
    methods: {
      // 打开规则滚动到顶部
      closePop(){
        let popNode = document.querySelector('.van-popup')
        popNode.scrollTop = 0
      },
      // 去创作者
      toCreator(val){
        if(this.$userInfo.nickname){
          if(this.$UA.isJM){
            this.$appService.openLink({link:`mtjimu://homepage?uid=${val.uuid}`})
          }else{
            window.location.href = `https://${
                process.env.NODE_ENV === 'development' ? 'dev-' : ''
              }jimu-h5.movtile.com/user.html?id=${val.uuid}`
          }
        }else{
          this.login()
        }
      },
      // 活动规则
      activityRule() {
        this.show = true;
      },
      // 站内打开链接
      _openLink(val) {
        if (this.$userInfo.nickname) {
          this.$appService.openLink({ link: val });
        } else {
          this.login();
        }
      },
      // 去邀请好友
      toInvite() {
        if (this.$userInfo.nickname) {
          window.location.href = new URL(`share.html`, window.location.href);
        } else {
          this.login();
        }
      },
      // 点击关注
      attention(item, e) {
        if (this.$userInfo.nickname) {
          if (!this.canFollow) return;
          this.canFollow = false;

          if (this.taskData.follow > -1) {
            // 开始发加积分的请求
            this.getGrade('follow', e);
          } else {
            // 只有加了积分之后，才能继续点击加积分
            this.canFollow = true;
          }

          this.$service
            .UserFollowAdd({ from: 1, uuid: item.uuid })
            .then((res) => {
              // 手动设置已经关注
              this.$set(item, 'isFous', true);
              // 这样写也没用,还是强制刷新一下
              this.$forceUpdate();
            })
            .catch((error) => {
              Toast(error.message);
            });
        } else {
          this.login();
        }
      },
      // 轮询用户任务积分
      getTaskGrade() {
        if(!this.$userInfo.nickname) return
        this.$service.SalesPointRoll().then((res) => {
          this.taskData = res;
        });
      },
      // 领取积分
      getGrade(val, e) {
        if (this.$userInfo.nickname) {
          // 计算显示的分数
          if (val === 'follow') {
            this.fs = 2;
          } else if (val === 'signin') {
            this.fs = 10;
          } else {
            this.fs = this.taskData[val];
          }
          // 请求成功之后开启动画
          let node = e.target.children[0].children[0];
          let newNode = document.createElement('span');
          let TextNode = document.createTextNode('+ ' + this.fs);
          newNode.appendChild(TextNode);
          newNode.style.position = 'absolute';
          newNode.style.top = '-2rem';
          newNode.style.left = '50%';
          newNode.style.transform = 'translate(-50%,0)';
          newNode.style.color = '#111';
          newNode.style.fontWeight = '500';
          node.appendChild(newNode);

          // 加动画
          setTimeout(() => {
            newNode.style.transition = 'all 2s';
            newNode.style.transform = 'translate(-50%,-15px)';
            newNode.style.opacity = '0';
          }, 10);
          // 这里是解决重复触发
          let flag = true;
          newNode &&
            newNode.addEventListener('transitionend', (e) => {
              if (flag) {
                node.removeChild(newNode);
                flag = false;
              }
            });
          setTimeout(() => {
            this.$service
              .SalesPointTake({ taskKey: val })
              .then((res) => {
                // 只有加了积分之后，才能继续点击加积分
                this.canFollow = true;
                // 刷新
                this.$emit('refreshGrade');
                // 刷新
                this.getTaskGrade();
              })
              .catch((err) => {
                Toast(err.message);
              });
          }, 1000);
        } else {
          this.login();
        }
      },
      // 获得创作者
      getCreator(val) {
        // const token = window.localStorage.getItem('token');
        this.$service.UserFollowRecommendUsers({ size: 3 }).then((res) => {
          this.creatorList = res;
          // 这里改一下数据,因为得自己手动操作关注
          this.creatorList.map((item) => {
            return (item.isFous = false);
          });
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .get-integral {
    @keyframes addAn {
      0% {
        transform: translateY(0px);
        opacity: 1;
      }
      50% {
        transform: translateY(-7px);
        opacity: 0.5;
      }
      100% {
        transform: translateY(-15px);
        opacity: 0;
      }
    }

    width: 100%;
    padding: 0rem 1.2rem;
    margin-top: 1.1rem;

    // vant样式修改
    .van-button {
      width: 7rem;
      height: 2.9rem;
      line-height: 2.9rem;
      background: #00be8b;
      border-radius: 15px;
      color: #fff;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 1.4rem;
    }
    .finished {
      background-color: #ccc;
    }
    .get {
      background-color: #ff9c00;
    }

    /deep/ .van-popup {
      color: #666;
      padding: 2rem 2rem;
      h2 {
        text-align: center;
        margin-bottom: 1rem;
        font-size: 1.4rem;
      }
      h3 {
        line-height: 2;
        font-size: 1.4rem;
        font-weight: 400;
      }
      .title{
        font-size: 1.4rem;
      }
      p{
        font-size: 1.4rem;
        line-height: 2;
      }
    }

    // 我要开盲盒的总标题
    .header {
      width: 100%;
      height: 2.9rem;
      overflow: hidden;
      display: flex;
      justify-content: center;
      position: relative;
      .i-will-open-box {
        width: 19rem;
        height: 2.9rem;
        background: url(../../assets/images/activity/title-logo.png) top center no-repeat;
        background-size: cover;
        font-size: 1.8rem;
        font-weight: 600;
        color: #111;
        text-align: center;
        line-height: 2.2;
      }
      .activity-rule {
        font-size: 1.2rem;
        font-weight: 400;
        position: absolute;
        top: 1.2rem;
        right: 0rem;
      }
    }

    // 做任务得积分
    .title {
      width: 100%;
      font-size: 3rem;
      position: relative;
      font-family: DIN;
      margin-top: 1.4rem;
      .title-content {
        position: absolute;
        height: 1.5rem;
        width: 100%;
        top: 2.5rem;
        left: 0rem;
        font-size: 1.4rem;
        background-color: #fff;
        color: #111;
        span {
          font-size: 1.2rem;
          color: #888;
          margin-left: 1rem;
        }
        .task-success {
          color: #ff9c00;
        }
      }
    }

    .task {
      height: 24.1rem;
      margin: 2rem 0rem;
      padding: 2.2rem 0rem;
      background-color: #f4f4f4;
      border-radius: 1.2rem;
      .task-item {
        display: flex;
        height: 3.3rem;
        align-items: center;
        width: 100%;
        margin-bottom: 2.2rem;
        position: relative;
        img {
          width: 3.3rem;
          height: 3.3rem;
          margin-left: 1rem;
        }
        .info {
          margin-left: 1.1rem;
          line-height: 1.4;
          .task-item-title {
            font-size: 1.4rem;
            color: #111;
            font-weight: 500;
            display: flex;
            align-items: center;
            span {
              display: inline-block;
              &:last-child {
                margin-left: 0.3rem;
                margin-top: 0.1rem;
              }
            }
            img {
              display: inline-block;
              width: 1.2rem;
              height: 1.3rem;
            }
          }
          .task-item-sub-title {
            font-size: 1.2rem;
            font-weight: 400;
            color: #888888;
          }
        }
        .task-item-button {
          position: absolute;
          right: 1rem;
          .receive-award {
            position: absolute;
            top: -1.5rem;
            left: 37%;
            color: #000;
            animation: addAn 1.5s normal infinite linear;
          }
        }
      }
    }

    // 关注创作者得积分
    .creator {
      height: 26rem;
      width: 100%;
      margin-top: 2rem;
      .creator-item {
        position: relative;
        width: 11.2rem;
        height: 18.2rem;
        padding: 0.8rem 0rem;
        background-color: #f4f4f4;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border-radius: 1.2rem;
        &::after {
          position: absolute;
          content: '';
          width: 1.2rem;
          height: 1.2rem;
          background-size: cover;
          top: 5rem;
          left: 6.9rem;
          z-index: 99;
        }
        img {
          display: block;
          width: 5.7rem;
          height: 5.7rem;
          border-radius: 50%;
        }
        p {
          font-size: 1.4rem;
          color: #111;
          font-weight: 500;
        }
        .nickname {
          width: 10rem;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          margin-top: 0.6rem;
          text-overflow: ellipsis;
        }
        .profession {
          font-size: 1.2rem;
          color: #999;
          margin-top: 0.6rem;
          font-weight: 400;
        }
        .add-jimu {
          position: relative;
          margin-left: 1.5rem;
          margin-top: 0.7rem;
          &::before {
            content: '';
            background: url(../../assets/images/activity/jimu.png);
            background-size: cover;
            width: 1.2rem;
            height: 1.3rem;
            position: absolute;
            top: 0.15rem;
            left: -1.5rem;
          }
        }
        .task-item-button {
          margin-top: 0.6rem;
        }
      }
      .person::after {
        background: url(../../assets/images/activity/authentication-person.png) no-repeat;
        background-size: cover;
      }
      .organization::after {
        background: url(../../assets/images/activity/authentication-organization.png) no-repeat;
        background-size: cover;
      }
      .swiper-slide {
        width: 11.2rem !important;
      }
    }
  }
</style>
<style lang="less">
  .van-toast {
    border-radius: 2.4rem;
    font-size: 1.4rem;
    color: #fff;
    padding: 9px 14px;
    box-sizing: border-box;
  }
  .van-toast--top {
    background: #00be8b;
    top: 33%;
  }
</style>
